<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>404 - 页面未找到</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义颜色和字体 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6',
            secondary: '#64748B',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .float {
        animation: float 6s ease-in-out infinite;
      }
      @keyframes float {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-20px); }
        100% { transform: translateY(0px); }
      }
    }
  </style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4 font-sans">
  <!-- 404错误图标 -->
  <div class="text-primary text-9xl md:text-[200px] font-bold mb-6 float">
    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
  </div>
  
  <!-- 错误信息 -->
  <div class="text-center mb-8">
    <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold text-gray-800 mb-4 text-shadow">404</h1>
    <p class="text-secondary text-lg md:text-xl mb-6 max-w-md mx-auto">
      抱歉，您访问的页面不存在或已被移除
    </p>
  </div>
  
  <!-- 导航按钮 -->
  <div class="flex flex-col sm:flex-row gap-4">
    <a href="/" class="bg-primary hover:bg-primary/90 text-white font-medium py-3 px-8 rounded-lg transition-all duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-1">
      <i class="fa fa-home mr-2"></i>返回首页
    </a>
    <a href="javascript:history.back()" class="bg-white hover:bg-gray-100 text-gray-700 font-medium py-3 px-8 rounded-lg border border-gray-200 transition-all duration-300 shadow-sm hover:shadow transform hover:-translate-y-1">
      <i class="fa fa-arrow-left mr-2"></i>返回上一页
    </a>
  </div>
  
  <!-- 页脚信息 -->
  <footer class="mt-12 text-secondary text-sm">
    <p>© 2023 您的网站名称 - 如有问题请联系我们</p>
  </footer>
</body>
</html>